<!DOCTYPE html>
<html lang="zh">
<head>
  {% load  static %}
  <meta charset="UTF-8">
  <title>学生管理系统-首页</title>
  <!--bootstrap-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
  <!--font awesome 字体图标-->
  <script src="https://kit.fontawesome.com/435000e02f.js"></script>
</head>
<body>
<div class="container">
  <h1 class="info"><a href="student/index/">学生列表</a></h1>
  <hr class="divider">
  <!--添加学生，导出学生列表， 过滤查询-->
  <a href="/student/add/" class="float-right"><button class="btn btn-warning btn-lg float-right">添加一个学生<i class="fas fa-plus"></i></button></a>

  <a href="export_excel" class="float-left"></a><button>导出学生列表</button>

  <form action="/student/index/" method="post" class="float-left">
    <input type="text" name="name" class="float-left form-text" placeholder="请输入姓名包含关键字">
    <select name="gender" class="float-left selector">
      <option value="1">男</option>
      <option value="2">女</option>
    </select>
    <button type="submit" class="btn btn-small btn-warning">查询</button>
  </form>
  <br>
  <table class="table">
    <tr class="thead-dark">
      <th>#</th>
      <th>学号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>电话</th>
      <th>头像</th>
      <th>加入时间</th>
      <th>操作</th>
    </tr>
    {% for stu in student_list %}
    <tr>
      <td><input type="checkbox" name="student"></td>
      <td>{{ stu.no }}</td>
      <td>{{ stu.name }}</td>
      <td>{{ stu.age }}</td>
      <td>{{ stu.get_gender_display }}</td>
      <td>{{ stu.phone }}</td>
      <td><img src="/media/{{ stu.avatar }}" width="50px" heigth="50px"></td>
      <td>{{ stu.join_time | date:"Y-m-d H:i:s"}}</td>
      <td><a href="/student/update/?stu_no={{ stu.no }}">修改<i class="fas fa-edit"></i></a>&nbsp;&nbsp;
        <a href="/student/delete/1/">删除<i class="fas fa-trash"></i></a>
      </td>
    </tr>
    {% endfor %}

  </table>
  <!--分页-->
  <nav aria-label="page navigation">
    <ul class="pagination">
      <li class="page-item" ><a href="{{ page_previous }}" class="page-link" >上一页</a></li>
      {% for i in page_amount_list %}
        <li {% if forloop.counter == page_no %}
              class="page-item active"
            {% else %}
              class="page-item"
            {% endif %}
        >
          <a href="/student/index/?page_no={{ forloop.counter }}&page_size=3" class="page-link">
            {{ forloop.counter }}</a>
        </li>
      {% endfor %}
      <li class="page-item"><a href="#" class="page-link">下一页</a></li>
    </ul>
  </nav>
</div>
</body>
</html>